<template>
	<view class="container">
		<view class="btns">
			<camera v-if="shows" id="camera" :device-position="cameraPosition" flash="off"
				style="width: 100%; height: 1145rpx;" @error="onCameraError" />
			<view class="face-guide">
				<image class="images" src="../../static/images.png" alt="Description"></image>
			</view>
			<image v-if="shows === false" style="width: 100%; height: 1200rpx; " :src="srcs" alt="Description"></image>
		</view>

		<view class="chooseImage">
			<image class="image" @click="chooselimages" src="../../static/camera.png" alt="Description"></image>
			<image class="images" @click="takePhoto" src="../../static/chooneimage.png" alt="Description">
			</image>
			<image class="images" @click="takePhotos" src="../../static/overturn.jpg" alt="Description">
			</image>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue"


	const photos = ref('')
	const shows = ref(true)
	onLoad((query) => {
		// 动态设置导航栏标题
		console.log(query,'123456')
		if(query.photo === 'undefined') {
			uni.setNavigationBarTitle({
				title:  '自定义'
			});
		}else {
			uni.setNavigationBarTitle({
				title: query.photo || '自定义'
			});
		}
		
		photos.value = query.photo
	})

	const srcs = ref('')

	onShow(() => {
		shows.value = true
	})
	// 上传阿里云的接口
	const tabkeAPi = (base64) => {

		// const formData = new FormData()
		// formData.append('base64', base64)

		// uni.request({
		// 	url: 'https://jmzjzzz.market.alicloudapi.com/id-phote/create',
		// 	method: 'post',
		// 	header: {
		// 		'Authorization': "APPCODE c0f34a9047194c209d53d49566b502bf",
		// 		'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
		// 	},
		// 	data: 'base64=data:image/png;base64,' + base64,
		// 	success: (res) => {
		// 		console.log(res)
		// 	},
		// 	fail: (err) => {
		// 		console.log(err, 失败)
		// 	}
		// })
		// uni.request({
		// 	url: 'https://jmzjzzz.market.alicloudapi.com/id-phote/create',
		// 	method: 'post',
		// 	header: {
		// 		'Authorization': "APPCODE c0f34a9047194c209d53d49566b502bf",
		// 		'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
		// 	},
		// 	data: {
		// 		url: 'https://env-00jxh2980bxq.normal.cloudstatic.cn/微信图片_20231222112224.jpg?expire_at=1722693093&er_sign=5b2279c2c984dc59586b0c5947017012'
		// 	},
		// 	success: (res) => {
		// 		console.log(res)
		// 	},
		// 	fail: (err) => {
		// 		console.log(err, 失败)
		// 	}
		// })
	}


	// 上传图片接口
	const uploadImage =(filePath)=>{
		console.log('上传')
		// uni.uploadFile({
		// 	url:"https://your-server.com/upload",
		// 	filePath:filePath,
		// 	name:'file', // 服务器接收文件的字段名
		// 	formData:{
		// 		'user':'test' // 其他需要提交的表单数据
		// 	},
		// 	success: (res) => {
		// 		console.log('上传成功111',res)	
		// 	},fail: (err) => {
		// 		console.log(err,'上传失败')
		// 	}
		// })
	}

	// 摄像头 
	const takePhoto = () => {
		const ctx = my.createCameraContext('camera');
		ctx.takePhoto({
			quality: 'high',
			success: (res) => {
				console.log(res)
				let filePath = res.tempImagePath
				srcs.value = filePath
				shows.value = false
				
				uploadImage(filePath)
				// uni.getFileSystemManager().readFile({
				// 	filePath, // 假设只选择了一个图片
				// 	encoding: 'base64',
				// 	success: res => {
				// 		console.log('图片转base')
				// 		tabkeAPi(res.data)
				// 	},
				// 	fail: err => {
				// 		console.error('读取文件失败:', err);
				// 	}
				// });
				setTimeout(() => {
					uni.navigateTo({
						url: `/subpack-age/Processing/index?photo=${photos.value}&url=${ res.tempImagePath}`
					})
				}, 1000)

			},
			error(e) {
				console.log(e.detail);
				uni.showToast({
					title:"请重新拍照"
				})
			}
		});

	}
	
	const onCameraError = (e) => {
		console.error('Camera error:', e.detail);
	}

	// 相册  
	const chooselimages = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function(res) {
				// console.log(res.tempFilePaths[0], 9999)
				// const url = JSON.stringify(res.tempFilePaths[0])
				// console.log(url, 1111)
				let filePath = res.tempFilePaths[0]
			
				// uni.getFileSystemManager().readFile({
				// 	filePath,
				// 	encoding: 'base64',
				// 	success: res => {
				// 		tabkeAPi(res.data)
				// 	},
				// 	fail: err => {
				// 		console.error('读取文件失败:', err);
				// 	}
				// });
				uni.navigateTo({
					url: `/subpack-age/Processing/index?photo=${photos.value}&url=${res.tempFilePaths[0]}`
				})
			}
		});
	}
	
	// 翻转摄像头
	const cameraPosition = ref('front')
	const takePhotos = () => {
		cameraPosition.value = cameraPosition.value === 'front' ? 'back' : 'front'
	}
</script>

<style scoped lang="scss">
	.chooseImage {
		width: 100%;
		height: 136rpx;
		padding: 0 117rpx;
		margin-top: 60rpx;

		.image {
			width: 72rpx;
			height: 72rpx;
			margin-bottom: 20rpx;
		}

		.images {
			width: 120rpx;
			height: 120rpx;
			// margin: 15rpx 117rpx ;
			margin-left: 117rpx;
		}
	}

	.container {

		width: 100%;
		height: 100vh;
	}

	.btns {
		position: relative;
	}

	.face-guide {
		position: absolute;
		top: 40%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* border: 2px solid #ff0000; */
		border-radius: 10px;
		width: 100%;
		height: 1145rpx;
		pointer-events: none;

		.images {
			width: 100%;
			height: 100%;
		}

		/* background: rgba(255, 0, 0, 0.3); */

	}
</style>